<template>
    <div class="com_box flexbox flexcolumn height_100" v-loading="loading" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0)">
        <div class="pd_20">
            <span class="font_16">{{title}}</span>
            <div class="flexbox flexcenter time_rank">
                <span class="font_14 color_01" style="margin-right:10px">时间粒度：</span>
                <el-radio-group v-model="queryInfo.during" size="small" @change="getDataList(1)">
                    <el-radio-button label="5">5分钟</el-radio-button>
                    <el-radio-button label="10">10分钟</el-radio-button>
                    <el-radio-button label="30">30分钟</el-radio-button>
                    <el-radio-button label="60">60分钟</el-radio-button>
                </el-radio-group>
            </div>
        </div>
        <div class="flex over_box table_box">
            <el-table :data="tableData" class="com_table" height="100%">
                <el-table-column prop="segmentation_during" label="时段">
                </el-table-column>
                <el-table-column prop="advertiser_name" label="广告账户">
                </el-table-column>
                <!-- <el-table-column prop="full_name" label="广告计划">
                </el-table-column> -->
                <el-table-column prop="stat_cost" label="当前消耗">
                </el-table-column>
                <el-table-column prop="pay_order_amount" label="当前转化销售额">
                </el-table-column>
                <el-table-column prop="pay_order_roi" label="当前ROI">
                </el-table-column>
                <el-table-column prop="segmentation_cost" label="时段消耗">
                </el-table-column>
                <el-table-column prop="segmentation_gmv" label="时段转化销售额">
                </el-table-column>
                <el-table-column prop="segmentation_roi" label="时段ROI">
                </el-table-column>
                <!-- <el-table-column prop="full_name" label="展示数">
                </el-table-column>
                <el-table-column prop="full_name" label="点击数">
                </el-table-column>
                <el-table-column prop="full_name" label="点击率">
                </el-table-column>
                <el-table-column prop="full_name" label="转化数">
                </el-table-column>
                <el-table-column prop="full_name" label="转化成本">
                </el-table-column>
                <el-table-column prop="full_name" label="转化率">
                </el-table-column> -->
            </el-table>
        </div>
        <div class="page_box flexbox flexcenter">
            <el-pagination background layout="total, prev, pager, next,sizes" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="queryInfo.page" :page-size="queryInfo.limit" :page-sizes="[20, 50, 100, 200]" :total="total">
            </el-pagination>
        </div>
    </div>
</template>

<script>
export default {
    name: "",
    data() {
        return {
            loading: false,
            title: "",
            queryInfo: {
                advertiser_id: "",
                template_id: "",
                ad_id: "",
                during: "5",
                page: 1,
                limit: 20,
            },
            total: 0,
            setpage: 1,
            tableData: [],
        };
    },
    created() {
        this.title = this.$route.query.name;
        this.queryInfo.advertiser_id = this.$route.query.advertiser_id;
        this.queryInfo.template_id = this.$route.query.template_id;
        this.queryInfo.ad_id = this.$route.query.ad_id;
        this.getDataList();
    },
    methods: {
        //获取列表
        async getDataList(page) {
            this.queryInfo.page = page;
            this.loading = true;
            const { data: res } = await this.$http.post(
                "adminapi/timeinterval/adItemCount",
                this.queryInfo
            );
            if (res.code !== 200) {
                this.loading = false;
                this.$message.error(res.msg);
                return;
            } else {
                this.loading = false;
                this.tableData = res.data.list;
                this.total = res.data.count;
            }
        },

        // 每页显示多少条数据
        handleSizeChange(val) {
            this.queryInfo.limit = val;
            this.getDataList(1);
        },
        // 当前页切换
        handleCurrentChange(val) {
            this.setpage = val;
            this.getDataList(val);
        },
    },
    components: {},
};
</script>


<style scoped>
.time_rank {
    margin-top: 20px;
}

.table_box {
    padding: 0 20px;
}
.time_model {
    padding: 8px;
}
.yusuan_list {
    margin-top: 0;
    margin-bottom: 20px;
}
.time_tag {
    padding: 0 8px;
    line-height: 21px;
    height: 21px;
    font-size: 12px;
    color: #616c85;
    border-radius: 2px;
    margin-right: 10px;
    background-color: rgba(165, 177, 209, 0.08);
}
</style>

<style>
.user_select .el-input__suffix .el-icon-arrow-up:before {
    content: "";
    color: #17233d;
}
</style>

